<template>
	<view class="page">
		<view class="login_bg">
			<view style="width: 50rpx;height: 50rpx;position: absolute;" @click="back()">
				<image class="back" src="../img/back.png" mode=""></image>
			</view>
			<image class="img" src="../../static/img/welcome_bg.png" />
			<span class="sp_1">异常状态判定</span>
		</view>
		<view class="shezhi">
			<view class="box">
				<span class="sp_1">心率上限设置</span>
				<input class="inp" type="text" placeholder="请输入心率上限" v-model="xinlu">
			</view>
			<view class="box">
				<span class="sp_1">每小时步数上限</span>
				<input class="inp" type="text" placeholder="请输入步数上限" v-model="bushu">
			</view>
			<view class="box">
				<span class="sp_1">靠近电子围栏</span>
				<view class="bt" style="display: flex;">
					<button v-for="(item,index) in buttons" :key="index"
						:class="{ 'bt_info': true, 'clicked': item.clicked }"
						@click="handleButtonClick(item,index)">{{item.text}}</button>
				</view>
			</view>
		</view>

		<button type="submit" class="bt_1" @click="inquire">提交</button>
	</view>
</template>

<script>
	import {
		AddUserConfigurationInformation,FindHeartRateAndLocation
	} from '@/utils/api.js';
	export default {
		data() {
			return {
				xinlu: '',
				bushu: '',
				weilan: '',
				buttons: [{
						text: '20',
						clicked: false
					},
					{
						text: '60',
						clicked: false
					},
					{
						text: '80',
						clicked: false
					},
					{
						text: '100',
						clicked: false
					},
				]
			}
		},
		methods: {
			//提交
			inquire() {
				console.log(this.xinlu, this.bushu, this.weilan);
				if (this.xinlu != '' && this.bushu != '' && this.weilan != '') {
					AddUserConfigurationInformation({
						token: this.$store.state.vx_token,
						body: {
							id: this.$store.state.vx_uid,
							heartRate: this.xinlu,
							steps: this.bushu,
							distance: this.weilan
						}
					}).then(res=>{
						console.log(res);
						if(res.code==200){
							uni.showToast({
								title: '异常状态判定设置成功'
							})
						}
					}).catch(err=>{
						console.log(err);
					})
				} else {
					uni.showToast({
						title: `请填写完整信息`,
						icon: 'none',
						duration: 2000
					})
				}


			},
			handleButtonClick(item, index) {
				console.log(item);
				this.weilan = item.text
				// 先将所有按钮的 clicked 状态重置为 false
				this.buttons.forEach(item => {
					item.clicked = false;
				});

				// 再将点击的按钮的 clicked 状态设为 true
				this.buttons[index].clicked = true;
			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，1 表示返回上一页，依次类推
					success: function() {}
				});
			}
		},
		onLoad() {
		},
		onShow() {
			FindHeartRateAndLocation({
				token: this.$store.state.vx_token,
				body: ""
			}).then(res=>{
				if(res.code==200){
					this.weilan=res.data.config.distance,
					this.xinlu=res.data.config.heartRate,
					this.bushu=res.data.config.steps
					this.buttons.forEach((item,index) => {
						if(item.text==this.weilan){
							this.buttons[index].clicked = true;
						}
					});
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	.clicked {

		width: 137rpx;
		height: 85rpx;
		background: #FFEAEA;
		// border-radius: 20rpx;
		color: #E47777;
		border: 1rpx solid #E06565;
		z-index: 99;
	}

	.page {
		width: 100vw;
		height: 100vh;
		position: relative;

		.login_bg {
			width: 750rpx;
			height: 722rpx;
			position: relative;

			.back {
				position: absolute;
				top: 130rpx;
				left: 30rpx;
				width: 23rpx;
				height: 36rpx;
			}

			.img {
				width: 100%;
				height: 100%;
			}

			.sp_1 {
				position: absolute;
				top: 150rpx;
				left: 277rpx;
				width: 200rpx;
				height: 32rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #333738;
				text-align: center;
				line-height: 32rpx;
			}
		}

		.shezhi {
			position: absolute;
			top: 15%;
			left: 30rpx;
			width: 689rpx;
			height: 650rpx;

			.box {
				width: 660rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 20rpx 0rpx;

				.sp_1 {
					width: 660rpx;
					height: 28rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #333738;
					line-height: 40rpx;
					padding-left: 32rpx;
				}

				.inp {
					width: 660rpx;
					height: 85rpx;
					background: #FFFFFF;
					border-radius: 43rpx;
					border: 1rpx solid #E3E3E3;
					font-weight: 400;
					font-size: 26rpx;
					color: #999EA0;
					line-height: 85rpx;
					padding-left: 40rpx;
				}

				.bt {
					width: 660rpx;
					height: 85rpx;
					margin: 0 14rpx;

					.bt_info {
						width: 137rpx;
						height: 85rpx;
						background: #FFFFFF;
						// border-radius: 20rpx;
						line-height: 85rpx;
						text-align: center;
						border: 1rpx solid #E3E3E3;
						// border: 1rpx solid #E06565;
						transition: background-color 0.3s ease;
					}
				}
			}
		}


		.bt_1 {
			margin: 180rpx auto 20rpx;
			width: 630rpx;
			height: 100rpx;
			background: #2CB0C5;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx
		}
	}
</style>